<template>
    <!-- 维护作业-告知事项代码维护页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6" class="common-box">
                    <el-col :span="8" class="common-lab">
                        <label class="labelName">代码</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input clearable placeholder="" v-model="searchParams.informno"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="6" class="common-box">
                    <el-col :span="8" class="common-lab">
                        <label class="labelName">告知事项内容</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input clearable placeholder="" v-model="searchParams.informdesc"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <el-row class="bgfff pb15">
                <el-col :span="24" class="pt5">
                    <el-button type="danger" @click="notifyCodeAddGo()" plain>新增</el-button>
                </el-col>
            </el-row>
            <!-- 查询结果 -->
            <div class="table_container">
                <el-table v-loading="loading" :data=" notifyCodetableData" highlight-current-row header-cell-class-name="table-header-class"
                    style="width:100%">
                    <el-table-column min-width="120" property="informno" label="代码" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="120" property="informdesc" label="告知事项内容" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="120" property="switch_indicator" label="告知事项" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="120" fixed="right" label="操作" align='center'>
                        <template slot-scope="scope">
                            <!-- <el-button type="text" size="small" @click="notifyCodeUpdateGo(scope.row)">修改</el-button> -->
                            <span class="operationIcon" @click="notifyCodeUpdateGo(scope.row)">
                              <el-tooltip class="item" effect="light" content="修改" placement="top">
                                <i class="el-icon-edit"></i>
                              </el-tooltip>
                          </span>
                            <!-- <el-button type="text" size="small" @click="notifyCodeDelete(scope.row)">删除</el-button> -->
                            <span class="operationIcon ml5" @click="notifyCodeDelete(scope.row)">
                                <el-tooltip class="item" effect="light" content="删除" placement="top">
                                  <i class="el-icon-delete"></i>
                                </el-tooltip>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="pagination">
                            <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
                                :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex'
                                @current-change='handleCurrentChange' @size-change='handleSizeChange'>
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 弹框 修改-->
        <el-dialog title="告知事项代码维护" :visible.sync="notifyCodeDialog" width="60%" center>
            <el-form ref="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                            <label class="informno" prop="informno">代码</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input clearable v-if="update" disabled placeholder="" v-model="notifyCodeDetail.informno"></el-input>
                            <el-input clearable v-else placeholder="" v-model="notifyCodeDetail.informno"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                            <label class="switch_indicator" prop="switch_indicator">告知事项</label>
                        </el-col>
                        <el-col :span="16">
                            <el-select v-model="notifyCodeDetail.switch_indicator" placeholder="">
                                <el-option label="l" value="l">
                                </el-option>
                                <el-option label="C" value="C">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-col>
                    <el-col :span="24" class="common-box">
                        <el-col :span="3" class="common-lab">
                            <label class="informdesc" prop="informdesc">告知事项内容</label>
                        </el-col>
                        <el-col :span="20">
                            <el-input clearable type="textarea" placeholder="" v-model="notifyCodeDetail.informdesc"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="saveNotifyCode" class="Defaultbutton">保 存</el-button>
                <el-button @click="notifyCodeDialog = false">返 回</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import { getApprizeList, deleteEufjpky, updateEufjpky } from '@/api/setting/maintain/underwrite.js';
    import validRules from "@/utils/validRules";
    export default {
        data() {
            return {
                rules: {
                    informno: [
                        { required: true, message: '请输入告知事项代码', trigger: 'blur' },
                        { validator: validRules.isNumberorLetter, message: '请正确输入告知事项代码', trigger: 'blur' }
                    ],
                    switch_indicator: [
                        { required: true, message: '请选择告知事项', trigger: 'blur' },
                    ],
                    informdesc: [
                        { required: true, message: '请输入告知事项代码', trigger: 'blur' },
                    ]
                },
                notifyCodeDialog: false,//默认隐藏 告知事项代码维护修改弹框
                // 查询条件
                searchParams: {
                    informno: '',
                    informdesc: '',
                },
                notifyCodetableData: [//数据
                ],
                loading: false,
                update: false,
                notifyCodeDetail: {},
                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        created() {
            //          this.getList();
        },
        mounted() {
            // this.getList();
        },
        methods: {
            //更新告知事项弹窗
            notifyCodeUpdateGo(row) {
                this.notifyCodeDialog = true;
                this.notifyCodeDetail = row;
                this.update = true;
            },
            //新增核保等级
            notifyCodeAddGo() {
                this.notifyCodeDetail = {}
                this.notifyCodeDialog = true;
                this.update = false;
            },
          //验证是否为汉字
          checkLegal(obj, msg) {
            let CHNReg = /^[0-9a-zA-Z]*$/g;//正则表达式
            let Reg = new RegExp(CHNReg);
            if (!Reg.test(obj)) {
              this.popMsg(msg,"error");
              return true;
            }
          },
            //保存信息
            saveNotifyCode() {
                if (this.notifyCodeDetail.informno == null || this.notifyCodeDetail.informno == "") {
                    this.popMsg("代码不能为空!", "error");
                    return;
                }else{
                    let infoNo = this.notifyCodeDetail.informno.trim();
                  if(this.checkLegal(infoNo, "请正确输入告知事项代码")){
                    return;
                  }
                }

                if (this.notifyCodeDetail.informdesc == null || this.notifyCodeDetail.informdesc == "") {
                    this.popMsg("告知事项内容不能为空!", "error");
                    return;
                }
                if (this.notifyCodeDetail.switch_indicator == null || this.notifyCodeDetail.switch_indicator == "") {
                    this.popMsg("告知事项不能为空!", "error");
                    return;
                }
                if (this.update) {
                    this.notifyCodeDetail.method = "modify";
                } else {
                    this.notifyCodeDetail.method = "add";
                }
                this.$store.dispatch('loading/CHNAGE_SUBLOADING', true)
                updateEufjpky(this.notifyCodeDetail).then(res => {
                  this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                  if (res.resultCode == constant.SUCCESS) {
                        this.popMsg("保存成功","success");
                        this.notifyCodeDialog = false;
                        this.searchParams.informno = this.notifyCodeDetail.informno;
                        this.getList();

                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                })
            },
            //删除
            notifyCodeDelete(item) {
              this.$confirm('确定要删除该条信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let param = {
                  "informno": item.informno,
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                deleteEufjpky(param).then(res => {
                  this.$store.dispatch('loading/CHANGE_LOADING', false)
                  if (res.resultCode == constant.SUCCESS) {
                    this.popMsg("删除成功！","success")
                    this.getList();
                  }
                }).catch(err => {
                  this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
              }).catch(() => {

              });

            },
            // 查询列表
            getList() {
                let para = {
                    "informno": this.searchParams.informno,
                    "informdesc": this.searchParams.informdesc,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                getApprizeList(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        if (res.data.list.length > 0) {
                            this.paginations.total = res.data.total;
                            this.notifyCodetableData = res.data.list;
                        } else {
                            this.popMsg("无符合条件资料!", "error");
                            this.paginations.total = 0;
                            this.notifyCodetableData = [];
                        }

                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList();
            },
            // 根据条件查询列表
            subGetList() {
                this.paginations.pageIndex = 1;
                this.getList();
            },
            // 清除查询条件
            resetSearch() {
                this.searchParams.informno = '';
                this.searchParams.informdesc = '';
            },
            popMsg(message, type) {
                this.$message({
                    message: message,
                    type: type
                });
            },
        },
        computed: {
            ...mapGetters(['tags']),
            reload() {
                return this.$store.state.loading.reload;
            }
        },
        activated() {
            if (this.reload) {
                this.$store.dispatch('loading/CHNAGE_RELOAD', false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;
    }

    .search_container {
        padding: 20px 20px 0 20px; //    border-top: 1px solid #e1e1e1;
    }

    .common-box {
        padding-bottom: 15px;
    }

    .common-lab {
        line-height: normal!important;
        text-align: right;
        .labelName {
            text-align: right;
        }
    }
</style>